<template>
<div>
    <div style="display: flex;justify-content: center;">
                <el-input placeholder="请输入卡号/手机号" v-model="keyword" class="input-with-select"
                          @keyup.enter.native="debouncedSearch"
                          :clearable="true"
                          @clear="onClear"
                >
                    <el-button slot="append" icon="el-icon-search" @click="debouncedSearch"></el-button>
                </el-input>
                <div style="height: 32px;padding-top: 15px;width: 30px;text-align: center;" @click="toggleRemark">
                    <i class="el-icon-arrow-down"></i>
                </div>
            </div>
            <el-input v-show="showRemark" 
                placeholder="请输入订单备注" 
                v-model="remark" 
                class="input-with-select"
                @keyup.enter.native="debouncedSearch"
                :clearable="true"
            >
            </el-input>

            <el-empty v-if="list.length === 0" description="暂无可用会员卡">
            </el-empty>

            <el-descriptions v-for="(item,k) in list" :key="k" class="margin-top" :column="2" size="medium" border>
                <template slot="extra">
                    <el-button v-if="item.status > 0" type="primary" :loading="loading" @click="onPay(item)">支 付
                    </el-button>
                </template>
                <el-descriptions-item>
                    <template slot="label">会员卡号</template>{{item.card_sn}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">会员姓名</template>{{item.name}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">会员手机号</template>{{pwdMobile(item.mobile)}}<i class="el-icon-view" style="float: right;" @click="showPwdMobile=!showPwdMobile"></i>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">账户余额</template>{{item.money}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">账户积分:</template>{{item.score}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">账户状态:</template>{{item.status > 0 ? '正常':'禁用'}}
                </el-descriptions-item>
            </el-descriptions>

            <verify-pwd ref="verifyPwd" @verify="debouncedSubmit"></verify-pwd>
</div>
    
</template>
<script>
import VerifyPwd from "@/components/MemberCard/VerifyPwd.vue";
import _ from 'lodash'
export default {
  components: {
    VerifyPwd,
  },
  data() {
    return {
        show:false,
        keyword: '',
        list: [],
        currentCard: null,
        loading:false,
        remark:'',
        showRemark:false,
        showPwdMobile:true
    };
  },
  created() {
    this.debouncedSearch = _.debounce(this.onSearch, 500);
    this.debouncedSubmit = _.debounce(this.onSubmitOrder, 500);
  },
  methods: {
    pwdMobile(mobile) {
      let length = mobile.length;
      if (this.showPwdMobile && length === 11) {
        let mid = mobile.substr(3, 4);
        return mobile.replace(mid, "****");
      }
      return mobile;
    },
    toggleRemark() {
      this.showRemark = !this.showRemark;
    },
    clickPay() {
      if (this.cartNumber < 1) {
        this.$message({ type: "error", message: "请选择座位" });
        return;
      }
      this.show = true;
    },
    onClear() {
      this.keyword = ''
      this.list = [];
    },
    onSearch() {
      this.list = [];
      this.$http
        .post("/api/member-cards/search", { keyword: this.keyword })
        .then((ret) => {
          this.list = ret.data;
        });
    },
    onPay(item) {
      this.currentCard = item;
      if (!this.$refs["verifyPwd"].onCheck(item.id)) {
        this.debouncedSubmit(item);
      }
    },
    onSubmitOrder(flag) {
        if(flag){
            this.$emit('submit',this.currentCard)
        }      
    },
  },
};
</script>